import React from 'react';
import { Scrollbars } from 'react-custom-scrollbars';

class DataTable extends React.Component<any, any> {
    // 滚动结束，记下滚动位置
    handleScrollStop = () => {
        if (this.scrollbarsRef.current) {
            this.scrollTop = this.scrollbarsRef.current.getScrollTop();
        }
    };
    scrollTop: any;

    componentDidMount() {
        //  覆盖ant design 自带滚动条样式
        if (document) {
            var abc: any = document.querySelector('.ant-table-scroll > .ant-table-body')
            if (abc)
                abc.style.overflow = 'hidden';
        }
        // 滚动条组件ref，重新设置滚动位置
        this.scrollbarsRef = React.createRef();
    }
    scrollbarsRef: any = React.createRef();
    // 组件重新渲染，重新设置滚动条的位置
    componentDidUpdate(prevProps: any, prevState: any, snapshot: any) {
        if (this.scrollbarsRef.current) {
            this.scrollbarsRef.current.scrollTop(this.scrollTop);
        }
    }

    render() {
        return (
            <Scrollbars
                style={this.props.scroll}
                onScrollStop={this.handleScrollStop}
                ref={this.scrollbarsRef} >
                {this.props.children}
            </Scrollbars>
        )
    }
}

export default DataTable;